<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 初始化样式 */
        
        * {
            margin: 0;
            padding: 0;
        }
        
        a {
            text-decoration: none;
            color: #c9c9dd;
        }
        
        ul {
            list-style-type: none;
        }
        
        em {
            font-style: normal;
        }
        /* 导航最大的元素 */
        
        .header-nav {
            width: 100%;
            height: 84px;
            background-color: rgba(0, 0, 0, 0.8);
            overflow: hidden;
            transition: 0.3s;
            position: absolute;
            margin-top: 41px;
            top: 0px;
            left: 0px;
        }
        
        .header-nav:hover {
            height: 349px;
        }
        /* 导航的版心 */
        
        .header-inner {
            /* 1920 */
            /* 版心定在1300px 版心980 1000 1200 1120*/
            width: 1300px;
            margin: 0 auto;
            height: 84px;
            /* background-color: skyblue; */
        }
        /* logo的样式 */
        
        .logo {
            float: left;
            margin-top: 16px;
        }
        /* 导航内容 */
        /* _________________导航内容开始_________________ */
        
        .main-nav {
            float: left;
            width: 890px;
            height: 84px;
            margin-left: 26px;
            /* background-color: pink; */
        }
        
        .main-nav li {
            float: left;
            width: 115px;
            height: 84px;
            margin-left: 5px;
        }
        
        .main-nav li a {
            display: block;
            width: 115px;
            height: 64px;
            text-align: center;
            font-size: 18px;
            color: #c9c9dd;
        }
        
        .main-nav li a p {
            font-size: 12px;
            /* margin-top: 2px; */
        }
        
        .main-nav li:hover {
            color: gold;
            background: url(images/index.png) no-repeat;
        }
        
        .main-nav li a:hover {
            color: gold;
            z-index: 20;
            /* border-bottom: rgb(230,185,85); */
            background: url(images/index.png) no-repeat;
        }
        
        .main-nav li span {
            display: block;
            margin-top: 19px;
        }
        
        .main-nav li em {
            font-size: 12px;
            color: #858792;
        }
        /* _________________导航内容结束_________________ */
        /* 登录 */
        
        .nav-login {
            float: right;
            width: 182px;
            height: 84px;
            /* background-color: yellow; */
            padding-top: 21px;
            box-sizing: border-box;
        }
        /* 登录的左边的头像 */
        
        .login-img {
            float: left;
        }
        
        .login-img img {
            border: 1px solid #d9ad50;
            border-radius: 42px;
        }
        /* 登录右边的文字 */
        
        .login-con {
            float: left;
            margin-left: 5px;
        }
        
        .login-con .user-name {
            color: #ffffff;
        }
        
        .login-con .welcome-link {
            font-size: 14px;
            color: #858792;
        }
        
        .main-up {
            height: 41px;
            width: 100%;
            font-size: 14px;
            background-color: #FFF;
        }
        
        .head-up {
            height: 41px;
            width: 980px;
            margin: 0 auto;
            background-color: #FFF;
        }
        
        .main-log {
            float: left;
            width: 150px;
            height: 41px;
            text-indent: 20px;
        }
        
        .main-cf {
            float: left;
            width: 240px;
            height: 38px;
            text-indent: 20px;
        }
        
        .main-right {
            width: 300px;
            height: 41px;
            float: right;
        }
        
        .main-right .ban {
            float: left;
            width: 20px;
            height: 41px;
            background: url(images/title_sprite.png) no-repeat -36px 6px;
            margin-left: 35px;
        }
        
        .main-right .grow {
            float: left;
            font-size: 14px;
            margin-top: 13px;
            color: #000;
            margin-left: 2px;
        }
        
        .down1 {
            float: left;
        }
        
        .down1 img {
            width: 15px;
            height: 15px;
            margin-top: 15px;
            margin-left: 2px;
        }
        
        body {
            background: url(images/bg.jpg) no-repeat 50% 0;
        }
        
        .nav2-down {
            width: 100%;
            height: 265px;
            position: relative;
            background-color: rgba(0, 0, 0, 0);
        }
        
        .nav2-downhert {
            width: 890px;
            height: 240px;
            margin: 0 auto;
            padding: 15px 0px 30px 50px;
            /* background-color: antiquewhite; */
            /* margin: 50px,15px,0px,3px; */
        }
        
        .nav2-list li {
            text-align: center;
            width: 115px;
            height: 182px;
            padding: 2px 2.5px 0;
            display: block;
            float: left;
        }
        
        .nav2-list li a {
            display: inline-block;
            width: 118px;
            height: 30px;
            line-height: 30px;
            border-top: 1px solid rgba(0, 0, 0, 0);
        }
        
        .nav2-list li a:hover {
            color: rgb(230, 185, 85);
            text-decoration: underline;
        }
        
        .nav2-list li a em {
            display: inline-block;
            width: 20px;
            height: 20px;
            vertical-align: middle;
            background: url(images/index.png) no-repeat -141px -69px;
        }
        
        .nav2-list li a i {
            display: inline-block;
            width: 20px;
            height: 20px;
            vertical-align: middle;
            background: url(images/index.png) no-repeat -165px -69px;
        }
        
        .main-center {
            width: 1200px;
            height: 342px;
            margin: 0px auto;
            margin-top: 500px;
            background: url(images/rotate_bg.png) no-repeat;
        }
        
        .center-lift {
            width: 604px;
            height: 342px;
            float: left;
        }
        
        .center-one {
            width: 325px;
            height: 342px;
            padding: 0 17px;
            float: left;
        }
        
        .center-right {
            width: 236px;
            height: 342px;
            float: left;
        }
        
        .lift-one {
            height: 298px;
            background: url(images/banner.jpg);
        }
        
        .center-lift ul li a {
            float: left;
            width: 120.8px;
            font-size: 14px;
            height: 44px;
            text-align: center;
            line-height: 44px;
        }
        
        .center-lift ul li a:hover {
            background: rgba(255, 255, 255, 0.15);
            color: #f3c258;
        }
        
        .center-one {
            width: 325px;
            height: 49px;
        }
        
        .center-one ul li a {
            float: left;
            width: 52px;
            font-size: 14px;
            text-align: center;
            line-height: 42px;
            border-bottom: 3px solid #000;
        }
        
        .center-one ul li a:hover {
            color: #f3c258;
            border-bottom: 3px solid #f3c258;
            height: 42px;
        }
        
        .center-two {
            width: 230px;
            height: 36px;
            line-height: 36px;
            padding: 0px 62px 0px 15px;
            margin-top: 66px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            text-align: center;
            color: #f3c258;
            font-size: 18px;
            background: #414046;
        }
        
        .center-bottom li {
            width: 325px;
            height: 21px;
            color: #b8b9c5;
            font-size: 14px;
            margin-bottom: 11px;
            margin-top: 10px;
        }
        
        .center-bottom em {
            display: inline-block;
            width: 270px;
            height: 21px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
        
        .fang {
            display: inline-block;
            margin-right: 2px;
            text-align: center;
            width: 32px;
            font-size: 12px;
            border-radius: 2px;
            color: #1e96ab;
            margin-bottom: 10px;
            border: 1px solid #1e96ab;
        }
        
        .fang-right {
            color: #999;
            float: right;
            font-size: 12px;
        }
        @keyframes lightmove{
            0% {
                left: -150px;
                top: -120px;
            }
            100% {
                left: 150px;
                top: 120px;
            }
        }
        .center-right1 {
            overflow: hidden;
            position: relative;
            width: 236px;
            height: 128px;
            background: url(images/index.png) no-repeat 0 -219px;
        }
        .download-btn-ani{
            transform:skew(-40deg,-30deg);
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 350px;
            height: 50px;
            animation: lightmove 1.6s ease-in infinite;
            filter: blur(32px);
            background-color: rgba(255, 255, 255, 0.8);
        }
        .center-right2 {
            width: 236px;
            height: 106px;
            background: url(images/index.png) no-repeat 0 -350px;
        }
        
        .center-right3 {
            width: 236px;
            height: 108px;
            background: url(images/index.png) no-repeat 0 -461px;
        }
        
        
        .fix-right {
            width: 254px;
            height: 494px;
            position: fixed;
            margin-top: -247px;
            top: 50%;
            right: 25px;
            background-image: url(images/r_navBg.png);
        }
        
        .fix-one {
            width: 165px;
            height: 277px;
            margin: 0 auto;
            border-top: 1px solid rgba(154, 216, 251, 0);
        }
        
        .text-box {
            width: 165px;
            height: 144px;
            background-image: url(images/r_dj.png);
            margin-top: 0px;
        }
        
        .text-box p {
            display: block;
            position: absolute;
            top: 35px;
            left: 11px;
            width: 88px;
            height: 36px;
            font-size: 14px;
            text-indent: 2px;
            font-weight: 1000;
            line-height: 18px;
            color: #62401b;
            margin-left: 45px;
        }
        
        .text-box1 {
            position: relative;
            width: 117px;
            height: 135px;
            background: url(images/r_all2022.png) no-repeat -245px 0px;
            top: 0px;
            left: 62px;
        }
        
        .text-box1 img {
            width: 100px;
            height: 100px;
            display: inline-block;
            margin-left: 8px;
            margin-top: 9px;
        }
        
        .tu1 {
            width: 117px;
            height: 38px;
            margin-top: 1px;
            position: relative;
            top: 0px;
            left: 106px;
            background: url(images/r_all2022.png) no-repeat 0px -160px;
        }
        
        .tu2 {
            width: 117px;
            height: 38px;
            margin-top: 1px;
            position: relative;
            top: 0px;
            left: 106px;
            background: url(images/r_all2022.png) no-repeat -122px -120px;
        }
        
        .tu3 {
            width: 117px;
            height: 38px;
            margin-top: 1px;
            position: relative;
            top: 0px;
            left: 106px;
            background: url(images/r_all2022.png) no-repeat -122px -160px;
        }
        
        .tu4 {
            width: 117px;
            height: 38px;
            margin-top: 1px;
            position: relative;
            top: 0px;
            left: 106px;
            background: url(images/r_all2022.png) no-repeat 0px -120px;
        }
        
        .tu1:hover {
            background: url(images/r_all2022.png) no-repeat 0px -240px;
        }
        
        .tu2:hover {
            background: url(images/r_all2022.png) no-repeat -122px -240px;
        }
        
        .tu3:hover {
            background: url(images/r_all2022.png) no-repeat -122px -200px;
        }
        
        .tu4:hover {
            background: url(images/r_all2022.png) no-repeat 0px -200px;
        }
        
        .main-down2 {
            width: 1215px;
            height: 134px;
            margin: 30px auto;
        }
        
        .main-down2 div {
            border-radius: 2px;
            width: 291px;
            height: 134px;
            float: left;
            overflow: hidden;
            margin-left: 10px;
        }
        
        .main-down2 div img:hover {
            transition: 0.5s;
            transform: scale(1.1);
        }
        
        .main-down2 div img {
            transition: 0.5s;
        }
        
        .tu li div img {
            width: 100px;
            height: 100px;
            transition: 0.5s;
        }
        
        .tu li div {
            border: 1px solid rgb(251, 207, 106);
            width: 105px;
            height: 143px;
            position: absolute;
            padding-top: 7px;
            padding-left: 6px;
            display: none;
        }
        
        .tu span {
            color: #f3c258;
        }
        
        .tu div {
            top: -60px;
            left: -114px;
            background-color: rgba(0, 0, 0, 0.6);
        }
        
        .tu li:hover div {
            display: block;
        }
        
        .tu p {
            font-size: 12px;
            color: #FFF;
        }
        
        .video {
            width: 1200px;
            height: 554px;
            /* border:1px solid #f3c258; */
            margin: 20px auto;
        }
        
        .video-lift {
            width: 872px;
            height: 553.8px;
            /* border: 1px solid rebeccapurple; */
            /* background-color: #1e96ab; */
            float: left;
            margin-right: 28px;
        }
        
        .video-right {
            width: 300px;
            height: 528px;
            /* border: 1px solid rgba(0, 0, 0); */
            /* background-color: #c9c9dd; */
            float: left;
            /* background-color: #1e96ab; */
        }
        
        .item-top {
            position: relative;
            width: 872px;
            height: 26px;
            background-color: #FFF;
            margin-bottom: 16px;
        }
        
        .item-title {
            width: 140px;
            height: 26px;
            font-size: 22px;
            line-height: 25px;
            text-indent: 33px;
            font-weight: 600;
            letter-spacing: 1px;
            background: url(images/index.png) no-repeat 0 -106px;
        }
        
        .item-right {
            position: absolute;
            top: 0;
            right: 0;
            padding-left: 22px;
            background: url(images/index.png)no-repeat -252px 4px;
            color: #999;
        }
        
        .item-sub {
            width: 872px;
            height: 32px;
            line-height: 29px;
            background: #f5f5f5;
            ;
        }
        
        .item-sub a {
            width: 289px;
            display: block;
            float: left;
            font-size: 14px;
            text-align: center;
            color: #000;
        }
        
        .item-splt {
            width: 1px;
            height: 20px;
            overflow: hidden;
            float: left;
            background: #e1e1e1;
            display: inline-block;
            margin: 5px 0 0px;
        }
        
        .item-sub a:hover {
            border-bottom: 3px solid #f3c258;
            color: #333333;
        }
        
        .item-title2 {
            width: 872px;
            height: 31px;
            padding-top: 8px;
            padding-bottom: 9px;
            text-indent: 8px;
            cursor: pointer;
            background-color: #FFF;
        }
        
        .item-title2 a:hover {
            border-color: #f3c258;
            background: #f3c258;
            color: #fff;
        }
        
        .item-title2 a {
            height: 24px;
            line-height: 24px;
            padding: 0 13px 0 8px;
            border: 1px solid #e5e5e5;
            border-radius: 10px;
            font-size: 14px;
            margin-right: 8px;
            display: inline-block;
            color: #000;
            background-color: #f5f5f5;
            margin-bottom: 5px;
        }
        
        .item-down {
            width: 872px;
            height: 410px;
            /* background-color: aliceblue; */
        }
        
        .item-down ul li {
            float: left;
            width: 209px;
            margin: 0 9px 30px 0;
            position: relative;
            height: 175px;
            /* background-color: #b8b9c5; */
            overflow: hidden;
        }
        
        .item-down ul li a {
            position: relative;
            display: block;
            width: 212px;
        }
        
        .item-down ul li img {
            width: 209px;
            height: 125px;
        }
        
        .item-down span {
            display: block;
            height: 40px;
            overflow: hidden;
            color: #333333;
            margin-top: 10px;
            font-size: 14px;
        }
        
        .item-header {
            position: relative;
            margin-bottom: 16px;
            background-color: #FFF;
        }
        
        .item_title {
            width: 140px;
            font-size: 22px;
            line-height: 25px;
            text-indent: 33px;
            font-weight: 600;
            letter-spacing: 1px;
            height: 25px;
            background: url(images/index.png) no-repeat 0 -144px;
        }
        
        .more_btn {
            position: absolute;
            top: 0;
            right: 0;
            padding-left: 22px;
            background: url(images/index.png)no-repeat -252px 4px;
            color: #999;
        }
        
        .item_subnav {
            width: 293px;
            height: 32px;
            line-height: 29px;
            background: #f5f5f5;
            ;
        }
        
        .item_subnav a {
            width: 97px;
            display: block;
            float: left;
            font-size: 14px;
            text-align: center;
            color: #000;
        }
        
        .item_split {
            width: 1px;
            height: 20px;
            overflow: hidden;
            float: left;
            background: #e1e1e1;
            display: inline-block;
            margin: 5px 0 0px;
        }
        
        .item_subnav a:hover {
            border-bottom: 3px solid #f3c258;
            color: #333333;
        }
        
        .new_hero_bottom {
            padding: 10px 15px;
            height: 47px;
            border: 1px solid #e5e5e5;
            border-top: none;
            border-radius: 0 0 2px 2px;
        }
        
        .new_hero {
            margin-top: 19px;
        }
        
        .new_hero_name {
            font-size: 18px;
            color: #333333;
            font-weight: bold;
            text-align: left;
        }
        
        .new_zi {
            font-size: 12px;
            color: #999999;
        }
        
        .hero_pic_list {
            margin-top: 15px;
        }
        
        .hero_pic_list ul li {
            position: relative;
            width: 68px;
            height: 173px;
            float: left;
            margin: 0 7px 12px 0;
            cursor: pointer;
            vertical-align: middle;
            display: table-cell;
        }
        
        .main_item {
            width: 1200px;
            height: 778px;
            margin-bottom: 28px;
            /* background-color: #e5e5e5; */
            margin: 10px auto;
        }
        
        .match_center {
            height: 778px;
            margin-right: 33px;
            width: 872px;
            float: left;
            /* background-color: aquamarine; */
        }
        
        .match_title {
            width: 140px;
            height: 24px;
            background-position: ;
            font-size: 22px;
            line-height: 25px;
            text-indent: 33px;
            font-weight: 600;
            letter-spacing: 1px;
            background: url(images/index.png) no-repeat 0 -184px;
            display: inline-block;
        }
        
        .item-subnav1 {
            height: 32px;
            line-height: 29px;
            background: #f5f5f5;
            ;
            margin-bottom: 19px;
        }
        
        .item-subnav1 a {
            float: left;
            width: auto;
            padding: 0 18px;
            display: block;
            float: left;
            font-size: 14px;
            text-align: center;
            color: #000;
        }
        
        .item-subnav1 a:hover {
            border-bottom: 3px solid #f3c258;
            color: #333333;
        }
        
        .item_content {
            width: 872px;
            height: 685px;
            /* background-color: blueviolet; */
            margin-bottom: 15px;
        }
        
        .match_news_pic {
            width: 211px;
            height: 260px;
            display: block;
            float: left;
            margin-right: 19px;
            background-color: #f3c258;
        }
        
        .match_news_list .news-list {
            float: left;
            width: 630px;
            height: 200px;
        }
        
        .news-list li {
            margin-bottom: 9px;
            width: 630px;
            height: 22.2px;
        }
        
        .da {
            width: 800px;
            font-size: 24px;
            color: #333;
            text-align: left;
        }
        
        .bao {
            width: 800px;
            height: 66px;
            /* border: 1px solid #FFF; */
            /* float: left; */
            margin-bottom: 9px;
        }
        
        .xiao {
            display: block;
            line-height: 23px;
            font-size: 14px;
            color: #666666;
            width: 450px;
            font-weight: normal;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
        
        .fl {
            font-size: 12px;
            float: left;
            height: 19px;
            line-height: 19px;
            margin-right: 12px;
            background: #e3e3e3;
            border-radius: 10px;
            border: 2px solid #e3e3e3;
            text-align: center;
            color: #999999;
        }
        
        .new-list li {
            display: block;
            overflow: hidden;
            margin-top: 20px;
        }
        
        .fld {
            width: 500px;
            font-size: 14px;
            float: left;
            color: #000;
        }
        
        .fr {
            float: right;
            font-size: 12px;
            color: #b8b9c5;
        }
        .video_list{
            width: 872px;
            height: 410px;
            /* float: left; */
            /* background-color: #1e96ab; */
        }
        .video_list li{
            float: left;
            width: 202px;
            margin: 0 16px 30px 0;
            /* background-color: #1e96ab; */
        }
        .video-tit{
            display: block;
            height: 40px;
            overflow: hidden;
            color: #333333;
            margin-top: 5px;
            font-size: 14px;
        }
        .match_schedule{
            width: 295px;
            height: 608px;
            float: right;
            /* background-color: #1e96ab; */
        }
        .item-header{
            height: 25px;
            width: 295px;
        }
        .item_title{
            float: left;
            font-size: 22px;
            line-height: 25px;
            text-indent: 33px;
            font-weight: 600;
            letter-spacing: 1px;
            background: url(images/index.png) no-repeat -157px -106px;
        }
        .gou{
            position: absolute;
            top: 0;
            right: 68px;
            padding-left: 22px;
            background: url(images/index.png) no-repeat -243px -85px;
            color: #323235;
            width: 70px;
            height: 22px;
            border: 1px solid #f3c258;
            border-radius: 3px;
            box-sizing: border-box;
            text-indent: 10px;
            line-height: 19px;
        }
        .gen{
            position: absolute;
            top: 0;
            right: 0;
            padding-left: 22px;
            background: url(images/index.png) no-repeat -252px 4px;
            color: #999;
        }
        .item_subnav{
            width: 293px;
            margin-bottom: 0;
            height: 32px;
            line-height: 29px;
            background: #f5f5f5;
            border-bottom: none;
        }
        .item_subnav span{
            display: block;
            float: left;
            font-size: 14px;
            color: #999;
            text-align: center;
        }
        .col1{
            width: 83px;
            margin-right: 0;
        }
        .col2{
            width: 43px;
            height: 29px;
            margin-right: 0;
            background: #f5f5f5;
        }
        .match_time{
            display: inline-block;
            line-height: 67px;
            width: 80px;
            color: #333333;
            font-size: 12px;
            text-align: center;
            vertical-align: top;
            line-height: 67px;
        }
        .team_name {
            width: 70px;
            height: 67px;
            color: #333333;
            font-size: 12px;
            text-align: center;
            display: inline-block;
        }
        .team_name img{
            overflow: hidden;
            display:block;
            width: 25px;
            height: 25px;
            margin: 10px auto 0 auto;
            border-radius: 50%;
        }
        .xia{
            display: inline-block;
            font-size: 12px;
            line-height: 24px;
            vertical-align: top;
            white-space: nowrap;
        }
        .bs li{
            height: 67px;
            line-height: 67px;
            border-bottom: 1px solid #e5e5e5;
        }
        .vs{
            display: inline-block;
            font-size: 14px;
            width: 43px;
            color: #f3c258;
            text-align: center;
            vertical-align: top;
        }
        .dabg{
            background: url(images/bg_footer.jpg) no-repeat 0 bottom;
        }
        .wan{
            margin-top: 23px;
        }
        .end{
            position: relative;
            background: none;
            width: 1200px;
            padding-top: 80px;
            /* background-color: #1e96ab; */
            color: #000;
            font: 12px/20px "微软雅黑","宋体";
            min-width: 1050px;
            margin: 0 auto;
            text-align: left;
            height: 282px;
        }
        .end_up{
            display: block;
            float: none;
            height: 66px;
            padding-bottom: 10px;
            margin-bottom: 12px;
            border-bottom: 2px solid #d4d4d4;
        }
        .ten{
            width: 285px;
            height: 64px;
            margin: 0;
            display: inline-block;
            background: url(images/spr.png) no-repeat;
        }
        .timi{
            display: inline-block   ;
            width: 70px;
            height: 64px;
            margin: 0;
            background: url(images/spr.png) no-repeat -285px 0;
        }
        .end_do1{
            display: block;
            position: absolute;
            left: 0;
            top: 170px;
            /* padding-top: 0; */
            width: 508px;
            font-size: 12px;
            color: #666;
        }
        .end_do1 p2{
            display: inline-block;
            margin-top: 5px;
        }
        .end_do_r{
            width: 650px;
            height: 160px;
            display: block;
            position: absolute;
            right: 0;
            top: 170px;
        }
        .tu01{
            vertical-align: middle;
            margin-right: 3px;
            display: inline;
        }
    </style>
</head>

<body>
    <div class="dabg">
    <div class="main-up">
        <div class="head-up">
            <div class="main-log">
                <img src="images/logo1.png" alt="">
            </div>
            <div class="main-cf">
                <img src="images/banner1.jpg" alt="">
            </div>
            <div class="main-right">
                <div class="ban">
                </div>
                <div class="grow">
                    <span href="#">
                        成长守护平台&emsp;&nbsp;腾讯游戏排行榜
                    </span>
                </div>
                <div class="down1">
                    <img src="images/jiantou.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <!-- 最大的通栏 -->
    <div class="header-nav">
        <div class="header-inner">
            <!-- logo -->
            <a href="" class="logo">
                <img src="images/logo.png" alt="">
            </a>
            <!-- 导航内容 -->
            <ul class="main-nav">
                <li>
                    <a href="">
                        <span>游戏资料</span>
                        <em>DATA</em>
                    </a>
                </li>
                <li>
                    <a href="">
                        <span>内容中心</span>
                        <em>CONTENTS</em>
                    </a>
                </li>
                <li>
                    <a href="">
                        <span>赛事中心</span>
                        <em>MATCH</em>
                    </a>
                </li>
                <li>
                    <a href="">
                        <span>百态王者</span>
                        <em>CULTURE</em>
                    </a>
                </li>
                <li>
                    <a href="">
                        <span>社区互动</span>
                        <em>COMMEUNITY</em>
                    </a>
                </li>
                <li>
                    <a href="">
                        <span>玩家支持</span>
                        <em>PLAYER</em>
                    </a>
                </li>
                <li>
                    <a href="">
                        <span>IP新游</span>
                        <em>NEW GAMES</em>
                    </a>
                </li>
            </ul>
            <!-- 右登录 -->
            <div class="nav-login">
                <!-- 左边头像 -->
                <a href="" class="login-img">
                    <img src="images/login.png" alt="">
                </a>
                <!-- 登录的内容 -->
                <div class="login-con">
                    <p class="user-name">欢迎登录</p>
                    <p class="welcome-link">登录后查看游戏战绩</p>
                </div>
            </div>
        </div>
        <div class="nav2-down">
            <div class="nav2-downhert">
                <ul class="nav2-list">
                    <li>
                        <a href="#">版本介绍</a>
                        <a href="#">游戏介绍</a>
                        <a href="#">英雄资料</a>
                        <a href="#"><i></i>爆料站</a>
                        <a href="#"><em></em>世界观体验站</a>
                        <a href="#">英雄资料</a>
                    </li>
                    <li>
                        <a href="#">版本介绍</a>
                        <a href="#">游戏介绍</a>
                        <a href="#"><em></em>英雄资料</a>
                        <a href="#"><em></em>版本介绍</a>
                    </li>
                    <li>
                        <a href="#"><i></i>版本介绍</a>
                        <a href="#">游戏介绍</a>
                        <a href="#">英雄资料</a>
                        <a href="#">版本介绍</a>
                        <a href="#"><i></i>游戏介绍</a>
                        <a href="#">英雄资料</a>
                        <a href="#">游戏介绍</a>
                        <a href="#">英雄资料</a>
                        <a href="#">版本介绍</a>
                    </li>
                    <li>
                        <a href="#">版本介绍</a>
                        <a href="#">游戏介绍</a>
                        <a href="#">英雄资料</a>
                        <a href="#"><em></em>版本介绍</a>
                        <a href="#">游戏介绍</a>
                        <a href="#"><em></em>英雄资料</a>
                    </li>
                    <li>
                        <a href="#"><i></i>版本介绍</a>
                        <a href="#"><i></i>游戏介绍</a>
                        <a href="#">英雄资料</a>
                    </li>
                    <li>
                        <a href="#">版本介绍</a>
                        <a href="#">游戏介绍</a>
                        <a href="#">英雄资料</a>
                    </li>
                    <li>
                        <a href="#"><em></em>版本介绍</a>
                        <a href="#"><em></em>游戏介绍</a>
                        <a href="#"><em></em>英雄资料</a>
                        <a href="#"><em></em>英雄资料</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
        <div class="main-center">
            <div class="center-lift">
                <div class="lift-one">

                </div>
                <ul>
                    <li><a href="#">亚运电竞特许商品</a></li>
                    <li><a href="#">峡谷空间站</a></li>
                    <li><a href="#">我在王者养灵兽</a></li>
                    <li><a href="#">K甲正式开赛</a></li>
                    <li><a href="#">神器传说CG</a></li>
                </ul>
            </div>
            <div class="center-one">
                <ul>
                    <li><a href="#">热门</a></li>
                    <li><a href="#">新闻</a></li>
                    <li><a href="#">公告</a></li>
                    <li><a href="#">活动</a></li>
                    <li><a href="#">赛事</a></li>
                    <li><a href="#">...</a></li>
                </ul>
                <div class="center-two">
                    星梦大赛全民海选开启，快来Pick你心中的大乔吧！
                </div>
                <ul class="center-bottom">
                    <li>
                        <em>
                    <span class="fang">新闻</span>
                    杭州亚运会倒计时200天+！首批电竞特许商品，来了！
                    </em>
                        <span class="fang-right">03/07</span>
                    </li>
                    <li>
                        <em>
                        <span class="fang">新闻</span>
                        春日主题荣耀播报方案票选结果公布-互动小任务第21期
                    </em>
                        <span class="fang-right">03/06</span>
                    </li>
                    <li>
                        <em>
                        <span class="fang">新闻</span>
                        蒙犽皮肤设计大赛创意赏析第十一期
                    </em>
                        <span class="fang-right">03/03</span>
                    </li>
                    <li>
                        <em>
                        <span class="fang">新闻</span>
                        互动小任务第21期-春日荣耀播报票选活动开启！
                    </em>
                        <span class="fang-right">02/24</span>
                    </li>
                    <li>
                        <em>
                        <span class="fang">新闻</span>
                        蒙犽皮肤设计大赛创意赏析第十期
                    </em>
                        <span class="fang-right">02/21</span>
                    </li>
                    <li>
                        <em>
                        <span class="fang">新闻</span>
                        首届星梦设计大赛开启公告
                    </em>
                        <span class="fang-right">03/06</span>
                    </li>
                    <li>
                        <em>
                        <span class="fang">新闻</span>
                        蒙犽皮肤设计大赛创意赏析第九期
                    </em>
                        <span class="fang-right">02/19</span>
                    </li>
                </ul>
            </div>
            <div class="center-right">
                <div class="center-right1">
                    <span class="download-btn-ani">
                    </span>
                </div>
                <div class="center-right2">

                </div>
                <div class="center-right3">

                </div>
            </div>
        </div>
        <div class="main-down2">
            <div class="ban1">
                <img src="images/ban1.jpg" alt="">
            </div>
            <div class="ban2">
                <img src="images/ban2.png" alt="">
            </div>
            <div class="ban3">
                <img src="images/ban3.jpg" alt="">
            </div>
            <div class="ban4">
                <img src="images/ban4.png" alt="">
            </div>
        </div>
        <div class="video">
            <div class="video-lift">
                <div class="item-top">
                    <h3 class="item-title">内容中心</h3>
                    <a href="#" class="item-right">更多</a>
                </div>
                <div class="item-sub">
                    <a href="">精品栏目</a>
                    <span class="item-splt"></span>
                    <a href="">精品栏目</a>
                    <span class="item-splt"></span>
                    <a href="">精品栏目</a>
                </div>
                <div class="item-title2">
                    <a href="">最新</a>
                    <a href="">峡谷大气层</a>
                    <a href="">峡谷大气层</a>
                    <a href="">马可波罗奇闻录</a>
                    <a href="">狄仁杰封神榜</a>
                    <a href="">峡谷大气层</a>
                    <a href="">夜王修炼手册</a>
                </div>
                <div class="item-down">
                    <ul>
                        <li>
                            <a href="">
                                <img src="images/banne1.jpg" alt="">
                                <span>峡谷大气层|这些脑洞放在整个高光播报界也是非常炸裂的</span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="images/banne1.jpg" alt="">
                                <span>峡谷大气层|这些脑洞放在整个高光播报界也是非常炸裂的</span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="images/banne1.jpg" alt="">
                                <span>峡谷大气层|这些脑洞放在整个高光播报界也是非常炸裂的</span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="images/banne1.jpg" alt="">
                                <span>峡谷大气层|这些脑洞放在整个高光播报界也是非常炸裂的</span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="images/banne1.jpg" alt="">
                                <span>峡谷大气层|这些脑洞放在整个高光播报界也是非常炸裂的</span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="images/banne1.jpg" alt="">
                                <span>峡谷大气层|这些脑洞放在整个高光播报界也是非常炸裂的</span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="images/banne1.jpg" alt="">
                                <span>峡谷大气层|这些脑洞放在整个高光播报界也是非常炸裂的</span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="images/banne1.jpg" alt="">
                                <span>峡谷大气层|这些脑洞放在整个高光播报界也是非常炸裂的</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="video-right">
                <div class="item-header">
                    <h3 class="item_title">英雄/皮肤</h3>
                    <a href="" class="more_btn">更多</a>
                </div>
                <div class="item_subnav">
                    <a href="#">最新英雄</a>
                    <span class="item_split"></span>
                    <a href="#">最新皮肤</a>
                    <span class="item_split"></span>
                    <a href="#">周免英雄</a>
                </div>
                <div class="new_hero">
                    <a href="">
                        <img width="295" height="156" class="lazy" src="images/545.jpg">
                    </a>
                    <div class="new_hero_bottom">
                        <p class="new_hero_name">新英雄：莱西奥</p>
                        <p class="new_zi">上线时间：2023.01.03</p>
                    </div>
                </div>
                <div class="hero_pic_list">
                    <ul>
                        <li>
                            <a href="">
                                <img width="68" height="173" src="images/544.jpg">
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img width="68" height="173" src="images/544.jpg">
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img width="68" height="173" src="images/544.jpg">
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img width="68" height="173" src="images/544.jpg">
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="main_item">
            <div class="match_center">
                <div class="item-top">
                    <h3 class="match_title">赛事中心</h3>
                    <a href="#" class="item-right">更多</a>
                </div>
                <div class="item-subnav1">
                    <a href="">KPL</a>
                    <span class="item-splt"></span>
                    <a href="">世界冠军杯</a>
                    <span class="item-splt"></span>
                    <a href="">挑战者杯</a>
                    <span class="item-splt"></span>
                    <a href="">K甲联赛</a>
                    <span class="item-splt"></span>
                    <a href="">K甲联赛</a>
                    <span class="item-splt"></span>
                    <a href="">K甲联赛</a>
                    <span class="item-splt"></span>
                    <a href="">K甲联</a>
                    <span class="item-splt"></span>
                    <a href="">微信游戏邀请赛</a>
                    <span class="item-splt"></span>
                    <a href="">TGA</a>
                    <span class="item-splt"></span>
                    <a href="">TGA</a>
                </div>
                <div class="item_content">
                    <div class="match_news">
                        <div id="match_news_pic">
                            <a class="match_news_pic">
                                <img src="images/76255391666445.jpg" alt="">
                            </a>
                        </div>
                        <div class="match_news_list">
                            <!-- <span class="fl">挑战者杯</span> -->
                            <div class="bao">
                                <a href="" class="da">武汉eStarPro勇夺2022年王者荣耀挑战者杯</a>
                                <a href="" class="xiao">10月6日，2022年王者荣耀挑战者杯总决赛顺利落幕，武汉eStarPro和北京WB历经7局鏖战，最终武汉eStarPro以4:3的比分击败对手成功卫冕挑战者杯</a>
                            </div>
                            <ul class="news-list">
                                <li>
                                    <span class="fl">挑战者杯</span>
                                    <a href="" class="fld">三大赛道群雄并起，2022挑战者杯淘汰赛八进四成王败寇</a>
                                    <em class="fr">09-22</em>
                                </li>
                                <li>
                                    <span class="fl">挑战者杯</span>
                                    <a href="" class="fld">厉兵秣马严阵以待，2022挑战者杯小组赛即将打响</a>
                                    <em class="fr">09-14</em>
                                </li>
                                <li>
                                    <span class="fl">挑战者杯</span>
                                    <a href="" class="fld">王者荣耀挑战者杯2022赛事规则</a>
                                    <em class="fr">09-13</em>
                                </li>
                                <li>
                                    <span class="fl">挑战者杯</span>
                                    <a " href=" " class="fld ">王者荣耀赛事竞猜系统公告</a>
                            <em class="fr ">01-18</em> 
                        </li>
                        <li>
                            <span class="fl ">挑战者杯</span>
                            <a class="fld ">挑战者杯总决赛王者时刻：武汉ES登顶夺冠</a>
                            <em class="fr ">01-17</em> 
                        </li>
                        <li>
                            <span class="fl ">挑战者杯</span>
                            <a href=" " class="fld ">挑战者皆王者！2021挑战者杯于杭州圆满落幕 武汉ES夺冠</a>
                            <em class="fr ">01-16</em>
                        </li>
                    </ul>
                </div>
            </div>
            <ul class="video_list">
                <li>
                    <a href="" >
                        <img src="images/ad.jpg" width="205">
                        <span class="video-tit">【荣耀大话王Ⅺ】一诺传授粉丝唱歌技巧 苏沫冰尘开展知识大PK</span>
                    </a>
                </li>
                <li>
                    <a href="" >
                        <img src="images/ad.jpg" width="205">
                        <span class="video-tit">【荣耀大话王Ⅺ】一诺传授粉丝唱歌技巧 苏沫冰尘开展知识大PK</span>
                    </a>
                </li>
                <li>
                    <a href="" >
                        <img src="images/ad.jpg" width="205">
                        <span class="video-tit">【荣耀大话王Ⅺ】一诺传授粉丝唱歌技巧 苏沫冰尘开展知识大PK</span>
                    </a>
                </li>
                <li>
                    <a href="" >
                        <img src="images/ad.jpg" width="205">
                        <span class="video-tit">【荣耀大话王Ⅺ】一诺传授粉丝唱歌技巧 苏沫冰尘开展知识大PK</span>
                    </a>
                </li>
                <li>
                    <a href="" >
                        <img src="images/ad.jpg" width="205">
                        <span class="video-tit">【荣耀大话王Ⅺ】一诺传授粉丝唱歌技巧 苏沫冰尘开展知识大PK</span>
                    </a>
                </li>
                <li>
                    <a href="" >
                        <img src="images/ad.jpg" width="205">
                        <span class="video-tit">【荣耀大话王Ⅺ】一诺传授粉丝唱歌技巧 苏沫冰尘开展知识大PK</span>
                    </a>
                </li>
                <li>
                    <a href="" >
                        <img src="images/ad.jpg" width="205">
                        <span class="video-tit">【荣耀大话王Ⅺ】一诺传授粉丝唱歌技巧 苏沫冰尘开展知识大PK</span>
                    </a>
                </li>
                <li>
                    <a href="" >
                        <img src="images/ad.jpg" width="205">
                        <span class="video-tit">【荣耀大话王Ⅺ】一诺传授粉丝唱歌技巧 苏沫冰尘开展知识大PK</span>
                    </a>
                </li>
            </ul>
           
        </div>
       </div>
       <div class="match_schedule">
        <div class="item-header">
            <h3 class="item_title">KPL赛程</h3>
            <a class="gou" href="">购票</a>
            <a class="gen" href="">更多</a>
        </div>
        <div class="item_subnav">
            <span class="col1">时间</span>
            <span class="col1">战队</span>
            <span class="col2"></span>
            <span class="col1">战队</span>
        </div>
        <ul class="bs">
            <li>
                <span class="match_time">3-15 17:00</span>
                <span class="team_name">
                    <img src="https://smobatv-pic.tga.qq.com/384921f944c10613c5eb0e565a982235.png" >
                    <em class="xia">厦门VG</em>
                </span>
                <span class="vs">VS</span>
                <span class="team_name">
                    <img src="https://smobatv-pic.tga.qq.com/198bee22f35580a28cfa53d4458f154c.png" >
                    <em class="xia">上海RNG.M</em>
                </span>
            </li>
            <li>
                <span class="match_time">3-15 17:00</span>
                <span class="team_name">
                    <img src="https://smobatv-pic.tga.qq.com/384921f944c10613c5eb0e565a982235.png" >
                    <em class="xia">厦门VG</em>
                </span>
                <span class="vs">VS</span>
                <span class="team_name">
                    <img src="https://smobatv-pic.tga.qq.com/198bee22f35580a28cfa53d4458f154c.png" >
                    <em class="xia">上海RNG.M</em>
                </span>
            </li>
            <li>
                <span class="match_time">3-15 17:00</span>
                <span class="team_name">
                    <img src="https://smobatv-pic.tga.qq.com/384921f944c10613c5eb0e565a982235.png" >
                    <em class="xia">厦门VG</em>
                </span>
                <span class="vs">VS</span>
                <span class="team_name">
                    <img src="https://smobatv-pic.tga.qq.com/198bee22f35580a28cfa53d4458f154c.png" >
                    <em class="xia">上海RNG.M</em>
                </span>
            </li>
            <li>
                <span class="match_time">3-15 17:00</span>
                <span class="team_name">
                    <img src="https://smobatv-pic.tga.qq.com/384921f944c10613c5eb0e565a982235.png" >
                    <em class="xia">厦门VG</em>
                </span>
                <span class="vs">VS</span>
                <span class="team_name">
                    <img src="https://smobatv-pic.tga.qq.com/198bee22f35580a28cfa53d4458f154c.png" >
                    <em class="xia">上海RNG.M</em>
                </span>
            </li>
            <li>
                <span class="match_time">3-15 17:00</span>
                <span class="team_name">
                    <img src="https://smobatv-pic.tga.qq.com/384921f944c10613c5eb0e565a982235.png" >
                    <em class="xia">厦门VG</em>
                </span>
                <span class="vs">VS</span>
                <span class="team_name">
                    <img src="https://smobatv-pic.tga.qq.com/198bee22f35580a28cfa53d4458f154c.png" >
                    <em class="xia">上海RNG.M</em>
                </span>
            </li>
            </ul>
            <img src="images/match_kic.jpg" alt="" width="295px" class="wan">
        </div>
    </div>
    <div class="end">
            <div class="end_up">
                <div class="ten"></div>
                <div class="timi"></div>
            </div>
                <div class="end_do1">
                    <span>抵制不良游戏&nbsp;</span>
                    <span>拒绝盗版游戏&nbsp;</span>
                    <span>注意自我保护&nbsp;</span>
                    <span>谨防受骗上当&nbsp;</span>
                    <span>适度游戏益脑&nbsp;</span>
                    <span>沉迷游戏伤身&nbsp;</span><br>
                    <span>合理安排时间&nbsp;</span>
                    <span>享受健康生活</span><br>
                    <p2>《王者荣耀》全部背景故事发生于架空世界“王者大陆”中。相关人物、地理、事件均为艺术创作，并非正史。若因观看王者故事对相关历史人物产生兴趣，建议查阅正史记载。</p2>
                </div>
                <div class="end_do_r">
                    <p>腾讯互动娱乐 | 服务条款 | 王者荣耀隐私保护指引儿童隐私保护指引 | 腾讯游戏招聘 | 腾讯游戏客服 | 游戏列表 | 广告服务及商务合作
                    </p>
                    <p>
                        COPYRIGHT © 1998 -2023 TENCENT.ALL RIGHTS RESERVED.&emsp;&emsp;&nbsp;腾讯公司版权所有&emsp;网络游戏行业防沉迷自律公约

                    </p>
                    <span>
                        <img class="tu01" src="images/gswj.png">工商网监电子标识 │ 粤网文[2020]3396-195号 | (署）网出证（粤）字第054号
                    </span><br>
                    <span>
                        <img class="tu01" src="images/icplogo.png">文网游备字[2016]M-CSG 0059号 | 新广出审[2017] 6712号|ISBN 978-7-7979-8408-9
                    </span><br>
                    <span>全国文化市场统—举报电话：12318
                    </span>
                </div>
    </div>
</div>
    <div class="fix-right ">
        <div class="fix-one ">
            <div class="text-box ">
                <p>扫一扫立刻<br>下载游戏~</p>
            </div>
            <div class="text-box1 ">
                <img src="images/gzh_code.jpg " alt=" ">
            </div>
        </div>
        <ul class="tu ">
            <li class="tu1 ">
                <div>
                    <img src="images/yd_qrcode.jpg " alt=" ">
                    <p>
                        扫码关注<span>官方微博</span><br>
                        领取<span>爆料及福利</span>
                    </p>
                </div>
            </li>
            <li class="tu2 ">
                <div>
                    <img src="images/yd_qrcode.jpg " alt=" ">
                    <p> 扫码关注<span>官方微博</span><br>
                        领取<span>爆料及福利</span></p>
                </div>
            </li>
            <li class="tu3 ">
                <div>
                    <img src="images/yd_qrcode.jpg " alt=" ">
                    <p> 扫码关注<span>官方微博</span><br>
                        领取<span>爆料及福利</span></p>
                </div>
            </li>
            <li class="tu4 ">
                <div>
                    <img src="images/yd_qrcode.jpg " alt=" ">
                    <p> 扫码关注<span>官方微博</span><br>
                        领取<span>爆料及福利</span></p>
                </div>
            </li>
        </ul>
    </div>
</body>

</html>